<template>
  <div class="box">
    <div class="centerbox">
      <!-- 步骤条 -->
      <div class="steps">
        <el-steps :active="active">
          <el-step title="基本信息"></el-step>
          <el-step title="字段信息"></el-step>
          <el-step title="存储位置"></el-step>
          <el-step title="确认信息"></el-step>
        </el-steps>
      </div>
      <!-- 内容 -->
      <div class="contentbox">
        <stepOne v-show="active == 0" ref="stepOne"></stepOne>
        <stepTwo v-show="active == 1" ref="stepTwo"></stepTwo>
        <stepThree v-show="active == 2" ref="stepThree"> </stepThree>
        <stepFour
          v-if="active == 3"
          :steponeData="steponeData"
          :stepTwoData="stepTwoData"
          :tableColumn="tableColumn"
          :stepThreeData="stepThreeData"
        >
        </stepFour>
      </div>
      <!-- 按钮 -->
      <div class="nextbutton">
        <el-button v-if="active > 0" @click="pre" class="nextButton3"
          >上一步</el-button
        >
        <el-button
          v-if="active < 3"
          type="primary"
          @click="next"
          :class="active == 0 ? 'nextButton1' : 'nextButton2'"
          >下一步</el-button
        >
        <el-button
          v-if="active === 3"
          type="primary"
          class="nextButton2"
          @click="save"
        >
          保存
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import stepOne from "./componnets/stepOne.vue";
import stepTwo from "./componnets/stepTwo.vue";
import stepThree from "./componnets/stepThree.vue";
import stepFour from "./componnets/stepFour.vue";
import { addMetadataInfo } from "@/api/metadata/metadata";
// import variables from "@/assets/styles/variables.scss";
// import ItemVue from '../../../layout/components/Sidebar/Item.vue';
export default {
  components: {
    stepOne,
    stepTwo,
    stepThree,
    stepFour,
  },
  data() {
    return {
      active: 0,
      steponeData: {},
      stepTwoData: [],
      stepThreeData: {},
      tableColumn: [],
    };
  },
  methods: {
    pre() {
      this.active--;
    },
    next() {
      if (this.active == 0) {
        //第一步
        const flag = this.$refs["stepOne"].validateForm();
        console.log(flag);
        this.steponeData = this.$refs["stepOne"].formData;
        if (flag) {
          let both =
            this.steponeData.checkList.indexOf("子表") != -1 &&
            this.steponeData.checkList.indexOf("单例") != -1;
          let mustone =
            this.steponeData.checkList.indexOf("内部") != -1 ||
            this.steponeData.checkList.indexOf("第三方") != -1;
          let bintwo =
            this.steponeData.checkList.indexOf("内部") != -1 &&
            this.steponeData.checkList.indexOf("第三方") != -1;
          if (both || !mustone || bintwo) {
            if (both) {
              //二者都有
              this.$message.error('"子表”和“单例”只能二选一或都不选');
            } else {
              //一个没有 或者选了两个
              this.$message.error("“内部”和“第三方”只能二选一");
            }
          } else {
            this.active++;
          }
        }
      } else if (this.active == 1) {
        //第二步
        this.stepTwoData = this.$refs["stepTwo"].tableData;
        this.tableColumn = this.$refs["stepTwo"].currentColumn;
        console.log(
          this.stepTwoData,
          this.tableColumn,
          "this.stepTwoData,this.tableColumn"
        );
        if (this.stepTwoData.length < 1) {
          this.$message.error("请至少添加一条表格数据！");
        } else {        
          this.active++;
        }
      } else {
        //第三步
        const flag = this.$refs["stepThree"].validateForm();
        if (flag) {
          this.stepThreeData = this.$refs["stepThree"].formData;
          this.active++;
        }
      }
    },
    save() {
      console.log(this.steponeData);
      console.log(this.stepTwoData);
      console.log(this.tableColumn);
      //发请求 然后跳转页面
      //------------第一个对象-第一步和第三步骤数据------------
      let metadataInfo = {};
      metadataInfo.name = this.steponeData.name;
      metadataInfo.label = this.steponeData.label;
      metadataInfo.description = this.steponeData.description;
      metadataInfo.moduleName = this.steponeData.moduleName;
      metadataInfo.dataSourceName = this.stepThreeData.dataSource;
      metadataInfo.isSingle =
        this.steponeData.checkList.indexOf("子表") > -1 ? 0 : 1;
      metadataInfo.isTable =
        this.steponeData.checkList.indexOf("单例") > -1 ? 0 : 1;
      metadataInfo.isInner =
        this.steponeData.checkList.indexOf("内部") > -1 ? 1 : 0;
      metadataInfo.isThirdParty =
        this.steponeData.checkList.indexOf("第三方") > -1 ? 1 : 0;
      metadataInfo.ascription = 0;
      // metadataInfo.creation = "";
      metadataInfo.docstatus = 0;
      metadataInfo.editableGrid = 0;
      metadataInfo.id = "";
      metadataInfo.isDel = 0;
      // metadataInfo.modified = "";
      metadataInfo.modifiedBy = "";
      metadataInfo.owner = "";
      metadataInfo.sortField = "";
      metadataInfo.sortOrder = 0;
      console.log(metadataInfo);
      //------------第二个数组 -第二步步骤数据------------
      let metadataFieldInfoVoList = [];
      if (this.stepTwoData.length > 0) {
        this.stepTwoData.forEach((item) => {
          let metadataFieldInfo = {};
          (metadataFieldInfo.fieldLabel = item.fieldLabel), //9字段标识
            (metadataFieldInfo.fieldName = item.fieldName), //10字段名
            (metadataFieldInfo.fieldType = item.fieldType), //11字段类型
            (metadataFieldInfo.idx = item.index), //15序号
            (metadataFieldInfo.metadataId = ""), //19元数据id
            // (metadataFieldInfo.creation = ""), //3创建时间
            // (metadataFieldInfo.docStatus = 0), //6是否是表头，0否/1是
            (metadataFieldInfo.fetchFrom = item.fetchFrom), //7从其他元数据获取字段名
            (metadataFieldInfo.fetchIfEmpty = item.fetchIfEmpty ? 1 : 0), //8仅在没有输入该值的时候获取，0未勾选，1勾选
            (metadataFieldInfo.hideDays = item.hideDays ? 1 : 0), //12隐藏天
            (metadataFieldInfo.hideSeconds = item.hideSeconds ? 1 : 0), //13隐藏秒
            (metadataFieldInfo.id = ""), //14元数据字段id
            (metadataFieldInfo.inGlobalSearch = item.inGlobalSearch ? 1 : 0), //16关键词搜索
            (metadataFieldInfo.isDel = 0), //17逻辑删除预留, 0 未删除，1删除
            (metadataFieldInfo.length = parseInt(item.length)), //18长度`
            (metadataFieldInfo.metadataName = ""), //元数据名，预留字段
            // (metadataFieldInfo.modified = ""), //修改时间
            (metadataFieldInfo.modifiedBy = ""), //修改人
            (metadataFieldInfo.moduleName = ""), //预留字段
            (metadataFieldInfo.nonNegative = item.nonNegative ? 1 : 0), //非负数
            (metadataFieldInfo.isAutoIncrement = item.isAutoIncrement ? 1 : 0), //自增
            (metadataFieldInfo.notNull = item.notNull ? 1 : 0), //必填,0 否 / 1 是
            (metadataFieldInfo.isUnique = item.isUnique ? 1 : 0), //唯一,0 否 / 1 是
            (metadataFieldInfo.options = ""), //字段类型扩展预留
            (metadataFieldInfo.owner = ""), //拥有者
            (metadataFieldInfo.precision = parseInt(item.precision)); //精度

          if (item.defaultValue) {
            metadataFieldInfo.defaultValue = item.defaultValue;
          } //4默认值
          console.log(item.description, "item.description");
          if (item.description) {
            metadataFieldInfo.description = item.description; //5描述
          }
          metadataFieldInfo.choose = item.choose; //，选择，
          let chooseDataList = [];
          if (item.choose == 1) {
            //1 Select
            chooseDataList = item.select; //2选择的数据，id或json
            metadataFieldInfo.chooseData = "";
          } else if (item.choose == 0) {
            if (item.fieldType == "Datetime") {
              if (item.chooseData) {
                metadataFieldInfo.chooseData = item.chooseData;
              }
              metadataFieldInfo.dataType = item.dataType;
            } else {
              metadataFieldInfo.chooseData = "";
            }
          } else if (item.choose == 2) {
            //2 Link，3 Table
            metadataFieldInfo.chooseData = "";
            // diaData.linkOrTable;
            chooseDataList = [
              {
                metadataLabel: item.metadataName, //元数据标识
                metadataFieldLabel: item.fetchFrom, //元数据字段标识
              },
            ];
            // metadataFieldInfo.chooseData ={
            //    metadataLabel:item.metadataName,//元数据标识
            //   metadataFieldLabel:item.fetchFrom,//元数据字段标识
            // };
          } else if (item.choose == 5) {
            //5----Dynamic Link
             metadataFieldInfo.chooseData = "";
            chooseDataList = [
              {
                 metadataFieldLabel: item.dlinkListInfo, //元数据字段标识
              },
            ];
          } 
          else {
            metadataFieldInfo.chooseData = "";
            chooseDataList = [
              {
                metadataLabel: item.linkOrTable, //元数据标识
              },
            ];
          }
          metadataFieldInfoVoList.push({ chooseDataList, metadataFieldInfo });
        });
      }
      //------------第三个对象 -第二步表头数据------------
      let arrStr = [];
      this.tableColumn.forEach((item) => {
        arrStr.push(item.prop);
      });
      let tableConfigVo = {};
      tableConfigVo.header = "";
      tableConfigVo.headerList = arrStr;
      tableConfigVo.id = "";
      tableConfigVo.metadataId = "";
      //最后穿的参数对象
      let objParams = {};
      objParams.metadataFieldInfoVoList = metadataFieldInfoVoList;
      objParams.metadataInfo = metadataInfo;
      objParams.tableConfigVo = tableConfigVo;
      //发送请求
      addMetadataInfo(objParams)
        .then((response) => {
          if (response.success) {
            this.$message.success("新增成功");
            this.$router.push("/metadata/metadataList");
          }
        })
        .catch((err) => {
          // this.$message.error(err.message);
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.box {
  width: 100%;
  height: 100%;
  background: #fff;
  .centerbox {
    width: 95%;
    height: 755px;
    // min-height: calc(100vh - 250px);
    margin: auto;
    .steps {
      border-bottom: 1px solid #e7eaec;
      padding: 35px 212px 20px 212px !important;
    }
    .contentbox {
      width: 90%;
      // padding-top: 25px;
      margin: auto;
      // margin-top: 20px;
    }
    // .nextbutton {

    // }
    .nextButton1 {
      width: 122px;
      height: 40px;
      background-color: #fff;
      color: $labelColor;
      font-size: 16px;
      margin-left: 470px;
      border-color: #e8eaec;
      border-radius: 4px;
    }
    .nextButton2 {
      width: 122px;
      height: 40px;
      background-color: $labelColor;
      color: #fff;
      font-size: 16px;
      margin-left: 20px;
      border-color: #e8eaec;
      border-radius: 4px;
    }
    .nextButton3 {
      width: 122px;
      height: 40px;
      background-color: #fff;
      color: $labelColor;
      font-size: 16px;
      margin-left: 375px;
      border-color: #e8eaec;
      border-radius: 4px;
    }
  }
}

::v-deep .is-process {
  /* color: #1f5dea; */
  // color: $base-menu-light-background;
  color:  $labelColor;

}
::v-deep .is-text {
  // background-color: $base-menu-light-background;
  background-color: $labelColor;
  color: #fff;
}
::v-deep .is-process .el-step__line {
  background: $labelColor;
}
::v-deep .is-finish .el-step__line {
  background: $labelColor;
}
::v-deep .el-step__line {
  /* background: #1f5dea; */
  height: 0;
  border-top: 2px dashed $labelColor;
  background-color: #fff;
}
::v-deep .el-step__line-inner {
  width: 0 !important;
}
</style>
<style scoped>
/deep/ .is-text {
  color: #fff;
}
/deep/ .el-step__icon.is-text {
  border: none;
}
/deep/ .is-horizontal {
  color: #d2dffb;
}
/deep/ .el-step__title.is-process {
  font-size: 16px !important;
  font-weight: normal;
}
/deep/ .is-wait .el-step__line {
  border-color: #d2dffb !important;
}
/deep/ .is-wait .is-text {
  background: #d2dffb !important;
}
</style>
